<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="__STATIC__/index/share/reset.css?t=111111">
    <link rel="stylesheet" href="__STATIC__/index/share/swiper/css/swiper.min.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        max-width: 1250px;
        margin: 0 auto;
    }

    .creater {
        /*padding: 1rem 0 0.4rem 1rem;*/
        width: 93.5%;
        margin: 0 auto;
        padding: 0.7rem 0 0.7rem 0;
    }

    .creater .creater-avatar {
        width: 4rem;
        border-radius: 50%;
    }

    .creater .info {
        padding-left: 1rem;
        line-height: 4rem;
    }

    .creater .info .creater-user {
        font-weight: bold;
    }

    .creater .creater-more {
        display: block;
        width: 30px;
        height: 30px;
        background-image: url('__STATIC__/index/share/more.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        top: 5px;
    }

    .main {
        margin: 0 auto;
        background-color: #fff;
        width: 100%;
    }
    /* .clearfix:after{
        visibility: hidden;
        display: inline-block;
        content: "";
        height: 0;
        clear: both;
        *zoom: 1;
    } */

    .main .img_box {
        width: 100%;
    }

    .main .img_box .img {
        width: 100%;
        height: 0;
        padding-top: 100%;
        /*background-color: #E78326;*/
        float: left;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /*background-size:100% 100%;*/
    }

    .swiper-pagination {
        width: 4.2rem;
        height: 2.2rem;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 1.1rem;
        line-height: 2.2rem;
        top: 1rem;
        right: 1rem;
        font-size: 12px;
    }

    .swiper-pagination-fraction {
        bottom: 0;
        right: 1rem;
    }
    .comment_count {
        color: #C0C0C0;
        padding: 1% 0 0 2.5%;
        font-size: 14px;
    }

    .time {
        color: #C0C0C0;
        padding: 1% 0 5% 2.5%;
        font-size: 10px;
    }

    .shike {
        height: 6.5rem;
        line-height: 6.5rem;
        /*border-top: 1px #ceced2 solid;*/
    }

    .shike .shike-intro .shike-logo .shike-logo-img {
        width: 4rem;
        height: 4rem;
        vertical-align: middle
    }

    .shike .shike-intro .shike-slogan {
        padding-left: 1rem;
        line-height: 1.4rem;
        padding-top: 1.4rem;
    }

    .shike .shike-intro .shike-slogan .shike-title {
        font-weight: bold;
        position: relative;
        font-size: 20px;
        line-height: 2.5rem;
    }

    .shike .shike-intro .shike-slogan .shike-detail {
        position: relative;
        top: 1px;
    }

    .shike .shike-open {
        line-height: 4rem;
        margin: 1rem auto;
        border-radius: 2rem;
        width: 20rem;
        height: 4rem;
        background: #fffc00;
        color: black;
        border: 1px black solid;
    }
    .shike .shike-open:hover {
        cursor:pointer;
    }
    /*按钮操作*/

    .option {
        width: 98%;
        height: auto;
        padding: 2% 1% 0 2%;
        margin: 0 auto;
    }

    .option .icon {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: block;
        height: 27px;
        width: 27px;
    }

    .option .icon:hover {
        cursor: pointer;
    }

    .option .icon-left {
        float: left;
        margin-right: 1.5rem;
    }

    .option .icon-right {
        float: right;
    }

    .option .option-like {
        background-image: url('__STATIC__/index/share/option-like.png');
    }

    .option .option-comment {
        background-image: url('__STATIC__/index/share/option-comment.png');
    }

    .option .option-share {
        background-image: url('__STATIC__/index/share/option-share.png');
    }

    .option .option-money {
        background-image: url('__STATIC__/index/share/option-money.png');
    }
    /*评论*/

    .comment {
        width: 100%;
        padding: 1% 2.5% 0 3.5%;
    }

    .comment .comment-body .comment-item {
        padding: 1% 0 0 0;
    }

    .comment .comment-body .comment-item .comment-avatar {
        padding-right: 1.5%;
    }

    .comment .comment-body .comment-item .comment-avatar img {
        width: 4rem;
    }

    .comment .comment-body .comment-item .comment-content {
        display: block;
    }

    .comment .comment-body .comment-item .comment-content .comment-user {
        font-weight: bold;
    }

    .comment .comment-body .comment-item .comment-content .comment-user .comment-date {}

    .comment .comment-body .comment-item .comment-option span {
        /*display: inline-block;*/
    }

    .comment .comment-body .comment-item .comment-option .comment-like {
        background: url('like.png');
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        top: 3px;
        margin-left: 4px;
    }
</style>

<body>
<div class="creater">
    <div class="pull-left">
        <img class="creater-avatar" src="{$essay_info['avatar']|default='__STATIC__/avatar.png'}" />
    </div>
    <div class="pull-left info">
        <span class="creater-user">{$essay_info['nickname']|default='匿名用户'}</span>
    </div>
    <i class="pull-right creater-more"></i>

    <div class="clearfix"></div>
</div>
<div class="main clearfix">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {foreach $essay_info['img_url'] as $value }
                <div class="box1 img_box swiper-slide">
                    <div class="img" style='background-image: url("{$value}"); '></div>
                </div>
            {/foreach}
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

<div class="option">
    <div class="pull-left">
        <i class="icon icon-left option-like"></i>
        <i class="icon icon-left option-comment"></i>
        <i class="icon icon-left option-share"></i>
        <div class="clearfix"></div>
    </div>
    <!--<div class="pull-right">-->
        <!--<i class="icon icon-right option-money"></i>-->
    <!--</div>-->
    <div class="clearfix"></div>
</div>

<div class="comment">
    <div class="comment-body">
        {if condition="$essay_info['content'] neq null" }
            <div class="comment-item">
                    <span class="comment-content pull-left">
                        <span class="comment-user">
                        {$essay_info['nickname']}&nbsp;
                        </span>
                        <span class="comment-date">{$essay_info['content']}</span>
                    </span>

                <div class="clearfix"></div>

            </div>
        {/if}

        {if condition="$essay_info['two_comments'] neq null" }
            {foreach $essay_info['two_comments'] as $comment }
                <div class="comment-item">
                        <span class="comment-content pull-left">
                            <span class="comment-user">
                            {$comment['nickname']}&nbsp;
                            </span>
                            <span class="comment-date">{$comment['content']}</span>
                        </span>
                    <div class="clearfix"></div>
                </div>
            {/foreach}
        {/if}

    </div>

</div>
<div class="comment_count">
    共{$essay_info['comment_count']}条评论
</div>
<div class="time">
    {$essay_info['create_time']}
</div>
<footer class="shike footer navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="text-center shike-open">
                打开丑丑app
            </div>
        </div>
    </div>
</footer>

<script src="__STATIC__/index/share/swiper/js/swiper.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script>
    $(function () {
        var img_count = {$img_count};
        if(img_count > 1){

            var swiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction'
                }
            });
        }else{
            $('.swiper-pagination').hide();
        }

        var url = "https://itunes.apple.com/cn/app/%E6%97%B6%E5%88%BB-%E8%AE%B0%E5%BD%95%E7%BE%8E%E5%A5%BD%E7%94%9F%E6%B4%BB/id1290852108?mt=8";
        $('.creater-more').on('click',function(){
            location.href = url;
        });
        $('.option-like').on('click',function(){
            location.href = url;
        });
        $('.option-comment').on('click',function(){
            location.href = url;
        });
        $('.option-share').on('click',function(){
            location.href = url;
        });
        $('.option-money').on('click',function(){
            location.href = url;
        });
        $('.shike-open').on('click',function(){
            location.href = url;
        });
    });

</script>
</body>

</html>